// 顶部样式
.top-nav-container {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  .logo {
    font-size: 1.563vw;
    box-sizing: border-box;
    text-indent: 1.042vw;
    font-weight: bold;
    color: #ffffff;

    img {
      margin-top: 0.55vw;
    }

    b {
      color: #4ec6a0;
    }
  }

  .el-menu {
    border: none !important;
    margin-left: 5vw;

    .nav-item {
      display: inline-block;
      margin-right: 0.573vw;

      .el-menu-item {
        border-radius: 3px;
        height: 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 14px;
        font-size: 0.833vw;

        .iconfont {
          font-size: 1.146vw;
        }
      }
    }
  }

  .right-menu {
    height: 2.204vw;
    margin-left: auto;
    border: solid 1px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    color: #ffffff;
    padding: 0 1.094vw;
    display: flex;
    align-items: center;
    margin-right: 1.042vw;

    .text {
      font-size: 0.729vw;
      height: 1.771vw;
      line-height: 1.771vw;
      padding-right: 1.094vw;
      border-right: solid 1px rgba(255, 255, 255, 0.4);
    }

    a {
      display: flex;
      align-items: center;
    }

    i {
      margin-left: 1.042vw;
      font-size: 1.146vw;
      line-height: 1.146vw;
      cursor: pointer;
    }
  }
}

// 左侧样式
.sidebar-container-content {
  // transition: width 0.28s;
  position: absolute;
  font-size: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  padding: 0 18px;
  box-sizing: border-box;

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }

  .el-scrollbar {
    height: 100%;
    z-index: 1003;
  }

  .is-horizontal,
  .is-vertical {
    display: none;
  }

  // 左侧导航菜单样式
  .el-menu {
    border-right: none !important;
    background-color: transparent !important;

    // 一级菜单
    .el-menu-item {
      margin-top: 10px;
      height: 36px;
      line-height: 36px;
      padding: 0 0 0 8px !important;
      border-radius: 3px;

      .iconfont {
        margin-right: 5px;
      }
    }

    .el-menu-item.is-active {
      font-weight: bold;
    }

    // 二级菜单
    .el-submenu {
      .el-submenu__title {
        padding: 0 0 0 12px !important;
        margin-top: 10px;
        height: 36px;
        line-height: 36px;
        border-radius: 18px 0 0 18px;

        .iconfont {
          margin-right: 20px;
        }
      }

      .el-menu {
        .nest-menu {
          .el-menu-item {
            padding: 0 0 0 0 !important;
            min-width: auto !important;
            box-sizing: border-box;
            text-align: center;

            .iconfont {
              display: none;
            }
          }

          .el-menu-item.is-active {
            background-color: transparent !important;
            font-weight: bold;
          }
        }
      }
    }

    .el-submenu.is-active {
      .el-submenu__title {
        font-weight: bold;
      }
    }
  }
}

// 内容区样式
.main-container-content {
  height: $xyContentHeight;
  //margin-left: $xySideBarWidth;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;

  &.sidebarHide {
    margin-left: 0 !important;
  }

  // 区域盒子
  .app-main {
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
  }
}

.report_d {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .basepage_menu {
    width: 100%;
  }

  .tit_l {
    float: left;
    width: 88px;
    height: 28px;
    background: url(../../assets/images/report_img/tit_bg.png) no-repeat;
    border-bottom: 1px solid #e3e9eb;
    box-sizing: content-box;
    font-size: 0.73vw;
    color: #5b6f76;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-indent: 10px;
  }

  .file {
    position: relative;
    border-top: 1px solid #e3e9eb;

    p.s_btn {
      width: 84px;
      height: 17px;
      background: url(../../assets/images/report_img/rep_sq.png) no-repeat;
      font-size: 12px;
      color: #7e9298;
      text-align: center;
      line-height: 17px;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -42px;
      z-index: 10;
      cursor: pointer;

      i {
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition:
          transform 0.3s,
          -webkit-transform 0.3s;
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
      }
    }

    .file_d {
      position: relative;
      display: flex;
      align-items: center;
    }
  }
}

//按钮样式
.el-button {
  font-size: 0.72vw !important;
  padding: 0.5vw 0.9vw !important;
}
.el-radio-button__inner {
  font-size: 0.72vw !important;
  padding: 0.5vw 1vw !important;
}

// 带边框边角的容器
.custom-card-corner-container {
  height: auto;
  border: 1px solid;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;

  &:after {
    content: '';
    position: absolute;
    width: calc(100% - 40px);
    top: -1px;
    bottom: -1px;
    z-index: 0;
    border: 1px solid;
    border-left: none;
    border-right: none;
    left: 20px;
  }

  &:before {
    content: '';
    position: absolute;
    height: calc(100% - 40px);
    left: -1px;
    right: -1px;
    top: 20px;
    border: 1px solid;
    border-top: none;
    border-bottom: none;
    z-index: 0;
  }

  .card-corner-inside {
    position: relative;
    z-index: 10;
  }
}

// 单选组件样式
.custom-radioTags-container {
  width: 100%;
  height: auto;

  ul {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;

    li {
      height: 1.458vw;
      line-height: 1.468vw;
      padding: 0 0.677vw;
      cursor: pointer;
      color: #5ea1cb;
      transition: all 0.3s;
      font-size: 0.729vw;
      border-style: solid;
      border-width: 1px;
      border-image-source: linear-gradient(30deg, #0b9ef2 0%, #43c8ff 100%);
      border-image-slice: 1;
      margin-right: 0.26vw;
    }

    li.active {
      border-image-source: linear-gradient(30deg, #0b9ef2 0%, #43c8ff 100%);
      color: #ebf2fc;
      background-image: linear-gradient(30deg, #0b9ef2 0%, #43c8ff 100%),
        linear-gradient(#031e43, #031e43);
      background-blend-mode: normal, normal;
    }
  }
}

// 列表搜索框样式
.search-container {
  width: 100%;
  height: auto;
  padding: 20px 20px 0;
  box-sizing: border-box;
}

// 分页修改
.el-pagination {
  text-align: right;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  button {
    padding: 0 10px;
    border-radius: 50px;
    background-color: rgba(121, 144, 172, 0.6) !important;
  }

  span {
    display: block;
  }

  button:disabled {
    background-color: rgba(121, 144, 172, 0.3) !important;
    opacity: 1;
  }

  .el-pager {
    margin: 0 10px;

    li {
      background: transparent;
      color: #aaa3a7;
    }

    li.active {
      background: #00a1f7;
      color: #ffffff;
      border-radius: 50px;
    }
  }
}

.esriPopup {
  .titlePane,
  .actionsPane {
    display: none;
  }

  .content,
  .contentPane {
    border-radius: 3px;
  }

  .contentPane {
    padding: 0;

    .mapHoverTitle {
      width: 100%;
      height: 30px;
      background-color: #43b6ff;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      font-weight: bold;
    }

    .mapHoverContent {
      padding: 10px;
      font-size: 14px;

      ul {
        li {
          display: flex;
          // height: 25px;
          line-height: 25px;

          label {
            padding-left: 10px;
          }
        }
      }
    }
  }

  .pointer {
    border: 1px solid #43b6ff;
    border-left: none;
    border-top: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    bottom: -9px;
  }

  .esriPopupWrapper {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: 1px solid #43b6ff;
  }
}

.theme-border-box {
  border: 1px solid;
  border-radius: 4px;
}

.position-date {
  position: absolute;
  right: 0;
  top: 10px;
  width: 120px;
  overflow: hidden;

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 120px;
  }
}

.wh100 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bdh-el-from {
  .el-form-item {
    display: flex;

    .el-form-item__content {
      flex: 1;
      display: flex;

      .el-date-editor {
        width: 100%;
      }

      .el-input-number {
        width: 100%;
      }

      .el-upload-container {
        display: flex;
        margin-left: 10px;

        button {
          margin-left: 10px;
        }
      }
    }

    label {
      width: 145px;
    }
  }
}

.countyAssessment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  > p {
    font-size: 14px;
    color: #666666;
  }
  &__container {
    flex: 1;
    padding: 20px 20px 0 20px;
    border: 1px solid #e3e9eb;
    background-color: #fff;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow:
      15px 15px 30px -10px rgba(0, 0, 0, 0.2),
      inset 20px 20px 15px rgba(255, 255, 255, 0.7),
      -15px -15px 35px rgba(255, 255, 255, 0.7),
      inset -1px 1px 10px rgba(0, 0, 0, 0.5);
  }
}
.app-wrapper-container {
  .el-dialog__header {
  }
}

// form表单 大小采用响应式
.el-form-item {
  margin-right: 1.55vw !important;
  margin-bottom: 0.8vw !important;
  .el-form-item__label {
    font-size: 0.7vw !important;
  }
}
.el-form-item--small {
  margin-right: 0.9vw !important;
  margin-bottom: 0.8vw !important;
}

.el-table {
  .el-button--mini.is-plain {
    height: 90% !important;
    position: relative;
    i {
      position: absolute;
      top: 7px;
      left: 13px;
    }
  }
}

// tabs标签页样式重构
.custom-el-tab,
.custom-el-tab-title,
.custom-popup-el-tab {
  position: relative;
  vertical-align: middle;
  .el-input__icon {
    line-height: 28px !important;
  }
  .el-select {
    width: 140px;
    margin-right: 5px;
    height: 28px;
    line-height: 28px;
    .el-input {
      height: 28px;
      line-height: 28px;
      .el-input__suffix {
        .el-input__suffix-inner {
          .el-input__icon {
            line-height: 28px;
          }
        }
      }
      .el-input__inner {
        height: 28px;
        line-height: 28px;
      }
    }
  }
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}
